<template>
	<view class="index-list-1" :class="unTitle?'new-list':''">
		<view 
		v-if="!unTitle"
		:style="{
			backgroundImage: `url(${list.bg})`,
			backgroundSize: '100% 100%',
			backgroundRepeat: 'no-repeat',
		}"
		class="list-1-title uv-flex" >
			<view class="list-title uv-box-1">{{list.title}}</view>
			<view class="rt-title uv-flex" v-if="list.title=='产品信息'">
				<image class="title-ico" src="/static/images/title-icon-1.png" mode=""></image>
				药材符合GAP要求
			</view>
			<view class="arrow-ico" v-if="list.collapse">
				<uv-icon name="arrow-up-fill" @click="handleCollapse(list)" v-if="list.cond" color="#fff"></uv-icon>
				<uv-icon name="arrow-down-fill" @click="handleCollapse(list)"  v-else color="#fff"></uv-icon>
			</view>	
			

		</view>
		<view class="list-1" v-if="list.cond" :class="unTitle?'new-list-li':''">
			<uv-transition 
				mode="fade"
				:show="list.cond"
				@change="change">
				<uv-cell-group >
					<uv-cell v-for="(item,index) in list.content" icon="" :title="item.title">
						<template v-slot:value>
							<text v-if="!item.img" class="r-name uv-flex">
								{{item.name}}
								<image v-if="item.label" class="label-gap" src="/static/images/label-gap.png" mode=""></image>
							</text>
							<text v-else class="r-img" >
								<image @click="handlePreviewImg(url)" :src="url" v-for="url in  item.img" mode=""></image>
							</text>
						</template>
					</uv-cell>
				</uv-cell-group>
			</uv-transition>
			
		</view>
		<view v-if="list.more" class="cg-more">
			点击查看>
		</view>
	</view>
</template>

<script setup>
import { watch } from 'vue';
	let	props = defineProps({
		list:{
			type:Object,
			default:{}
		},
		unTitle:{
			type:Boolean,
			default:false
		}
	})
	watch(
	  () => props.list,
	  (val) => {

	  },
	  { immediate: true }
	)
	const handleCollapse = (item)=>{
		item.cond = !item.cond
		
	}
	const handlePreviewImg = (url)=>{
		console.log(url,'uuuuu')
		uni.previewImage({
			urls:[url],
		})
	}
</script>

<style lang="scss" scoped>
	:deep(.uv-cell--center){
		padding:30rpx; 
	}
	.new-list{
		margin:0 auto !important;
	}
	.index-list-1{
		width:690rpx;
		margin:30rpx auto;
		.cg-more{
			width:100%;
			height:66rpx;
			line-height: 66rpx;
			text-align: center;
			color:#0C6F6A;
			background:#BED8E1;
			border-radius: 0 0 16rpx 16rpx;
			border: 2rpx solid #26B4AC;
			border-top:0;
			position:relative;
			top:-10rpx;
		}
		.new-list-li{
			// min-height:1000rpx !important;
			
		}
		.list-1{
			background: #EBF3FF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 2rpx solid #26B4AC;
			padding:0;
			.notice-list{
				width: 560rpx;
				height: 64rpx;
				background: #0C6F6A;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				margin:20rpx auto;
				display: flex;
				align-items: center;
				color:#fff;
				padding:0 30rpx;
			}
			.r-name{
				color:#0C6F6A;
				display: flex;
				align-items: center;
				.label-gap{
					width:130rpx;
					height:44rpx;
					margin-left:10rpx;
					position:relative;
					top:10rpx;
				}
			}
			.r-img{
				image{
					width:115rpx;
					height:115rpx;
					margin: 0 5rpx;
				}
			}
		}
		.list-1-title{
			background: linear-gradient( 90deg, #11413E 0%, #106F6A 100%);
			box-shadow: inset 4rpx 4rpx 2rpx 0rpx rgba(255,255,255,0.36);
			border-radius: 16rpx 16rpx 0rpx 0rpx;
			padding:20rpx 30rpx;
			position:relative;
			.arrow-ico{
				position:absolute;
				right:20rpx;
				top:50%;
				transform: translateY(-50%);
			}
			.list-title{
				font-weight: bold;
				font-size: 40rpx;
				background-image: linear-gradient(0deg, #F0BC76 0%, #FBF0DE 100%);;
				-webkit-background-clip: text;
				background-clip: text;
				-webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
				color: transparent; /* 兼容其他浏览器 */
			}
			.rt-title{
				background: linear-gradient( 90deg, #00ABC6 0%, rgba(1,96,206,0) 100%);
				border-radius: 88rpx 88rpx 88rpx 88rpx;
				padding:10rpx;
				color:#fff;
				.title-ico{
					width:48rpx;
					height:48rpx;
					margin-right:10rpx;
				}
			}
		}
	}
	.index-list-2{
		.list-1-title{
			background:url('/static/images/t-list-bg.png') no-repeat;
			background-size:100% 100%;
		}
	}
</style>